<template>
	<view class="content">
		<!-- 个人资料开始 -->
		<view class="person">
			<view class="personBox flx">
				<view class="userImg">
					<image src="../../static/indexBg1.jpg" mode=""></image>
				</view>
				<view class="userMessage">
					<view class="username">
						用户名
					</view>
					<view class="message">
						动态（个性签名）
					</view>
				</view>
				<view class="jump">
					 <i class="iconfont" >&#xe632;</i>
				</view>
			</view>
		</view>
		<!-- 个人资料结束 -->
		<view class="listContent">
				<!-- 收货地址 -->
				<view class="list flxc">
					<view class="icon">
						<image src="../../static/my/icon1.png" mode=""></image>
					</view>
					<view class="text">
						收货地址
					</view>
					<view class="jump1">
						 <i class="iconfont" >&#xe632;</i>
					</view>
				</view>
				<!-- 分隔 -->
				<view class="flxc">
					<view class="splitc"></view>
				</view>
				<!-- 我的商品 -->
				<view class="list flxc">
					<view class="icon">
						<image src="../../static/my/icon2.png" mode=""></image>
					</view>
					<view class="text">
						我的商品
					</view>
					<view class="jump1">
						 <i class="iconfont" >&#xe632;</i>
					</view>
				</view>
				<!-- 分隔 -->
				<view class="flxc">
					<view class="splitc"></view>
				</view>
				<!-- 设置 -->
				<view class="list flxc">
					<view class="icon">
						<image src="../../static/my/icon3.png" mode=""></image>
					</view>
					<view class="text">
						设置
					</view>
					<view class="jump1">
						 <i class="iconfont" >&#xe632;</i>
					</view>
				</view>
				<!-- 分隔 -->
				<view class="flxc">
					<view class="splitc"></view>
				</view>
				<!-- 活动消息 -->
				<view class="list flxc">
					<view class="icon">
						<image src="../../static/my/icon4.png" mode=""></image>
					</view>
					<view class="text">
						活动消息
					</view>
					<view class="jump1">
						 <i class="iconfont" >&#xe632;</i>
					</view>
				</view>
				<!-- 分隔 -->
				<view class="flxc">
					<view class="splitc"></view>
				</view>
				<!-- 联系客服 -->
				<view class="list flxc">
					<view class="icon">
						<image src="../../static/my/icon5.png" mode=""></image>
					</view>
					<view class="text">
						联系客服
					</view>
					<view class="jump1">
						 <i class="iconfont" >&#xe632;</i>
					</view>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style>
	page {
		min-height: 100%;
		background-color: #F2F2F2;
	}
	.flx {
		display: flex;
		justify-content: space-around;
	}
	.flxc {
		display: flex;
		justify-content: center;
	}
	.person {
		width: 100%;
		height: 290upx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		margin-top: 12upx;
		
	}
	.personBox {
		width: 92%;
		height: 266upx;
		border-radius: 20upx;
		box-shadow: 2upx 2upx 5upx #FFDEEA;
		background-image: url("../../static/my/myBg.png");
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-top: 33upx;
		margin: 0 auto;
		box-sizing: border-box;
		color: #FFFFFF;
		position: relative;
	}
	.userImg{
		height: 150rpx;
	}
	.userImg image {
		width: 121upx;
		height: 121upx;
		border-radius: 50%;
		
	}
	.userMessage {
		margin-top: 30upx;
		margin-left: 22upx;
		font-size: 35upx;
		width: 474upx;
		height: 150rpx;
	}
	.userMessage .message {
		font-size: 25upx;
		margin-top: 24upx;
		height: 70rpx;
		line-height: 70rpx;
	}
	.jump {
		position: absolute;
		right: 0;
		top: 40%;
	}
	.jump image {
		width: 40upx;
		height: 40upx;
	}
	.listContent {
		padding-top: 14upx;
		background-color: #FFFFFF;
		margin-top: 12upx;
	}
	.list {
		height: 113upx;
		line-height: 113upx;
		width: 100%;
	}
	image {
		width: 80upx;
		height: 80upx;
		border-radius: 40%;
		margin-top: 18upx;
	}
	.text {
		width: 535upx;
		margin-left: 40upx;
		font-size: 29upx;
	}
	.jump1 {
		margin-top: 15upx;
	}
	.jump1 image {
		width: 40upx;
		height: 40upx;
	}
	.splitc {
		width: 92%;
		height: 4upx;
		border-radius: 2upx;
		background-color: #F8F8F8;
	}
</style>
